<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景秀</title>
    <link rel="icon" href="images/fish.png ">
    <link rel="stylesheet" href="liangxi.css">
</head>
<body>
    <div id="container">
        <img src="images/fish.png" class="bigfish">
        <img src="images/text.png"class="text" >
        <img src="images/ice.png" class="ice">
        <img src="images/water.png" class="water">
        <img src="images/first-fish.png" class="firstfish">
        <img src="images/second-fish.png" class="second-fish">
        <img src="images/bubble.png" class="bubble">
        <img src="images/weixin.png" class="weixin">
        <div class="musicplay" onclick="playpause()"></div>
        <!--<img  class="musicplay" src=images/muted.png" onclick="playpause()" class="muted">-->
        <!--通过audio标签加载音频-->
        <!--loop 循环播放-->
        <!--preload 页面加载时进行加载 预播放-->
        <!--autoplay -->
        <audio id="music" loop preload="preload" src=" images/music.mp3">
        你的浏览器不支持html5，就换个浏览器吧！</audio>
        <!---->
    </div>
    
</body>
</html>
<script>
    // 通过id获取audio标签
  var audio = document.getElementById('music')
  var musicplay = document.getElementsByClassName('musicplay')[0]
  function playpause(){
    //   判断音频是否播放
    // paused:暂停
    // audio。pausesd获取到的值有两种：（1）ture
    if(audio.paused == true){
        // 如果音频是暂停的 就播放
        musicplay.style.backgroundImage = "url(images/sound.png)";
        audio.play();
        
    }
    else{
        // 否则就暂停
        musicplay.style.backgroundImage = "url(images/muted.png)";
         audio.pause();
               
    }
  }
</script>